class ImageSlideshow {
    constructor() {
        this.currentIndex = 0;
        this.slides = document.querySelectorAll('.image-slide');
        this.progressDots = document.querySelectorAll('.progress-dot');
        this.swipeHint = document.getElementById('swipeHint');
        this.musicControl = document.getElementById('musicControl');
        this.bgMusic = document.getElementById('bgMusic');
        this.isPlaying = false;
        this.touchStartY = 0;
        this.touchEndY = 0;
        this.minSwipeDistance = 50;
        
        this.init();
    }
    
    init() {
        this.setupTouchEvents();
        this.setupMusicControl();
        this.setupMusicAutoplay();
        this.hideHintAfterDelay();
    }
    
    setupTouchEvents() {
        const container = document.getElementById('imageContainer');
        
        container.addEventListener('touchstart', (e) => {
            this.touchStartY = e.touches[0].clientY;
        }, { passive: true });
        
        container.addEventListener('touchend', (e) => {
            this.touchEndY = e.changedTouches[0].clientY;
            this.handleSwipe();
        }, { passive: true });
        
        container.addEventListener('touchmove', (e) => {
            e.preventDefault();
        }, { passive: false });
    }
    
    handleSwipe() {
        const swipeDistance = this.touchStartY - this.touchEndY;
        
        if (Math.abs(swipeDistance) > this.minSwipeDistance) {
            if (swipeDistance > 0) {
                this.nextSlide();
            } else {
                this.prevSlide();
            }
        }
    }
    
    nextSlide() {
        if (this.currentIndex < this.slides.length - 1) {
            this.currentIndex++;
            this.updateSlide();
            this.hideSwipeHint();
        }
    }
    
    prevSlide() {
        if (this.currentIndex > 0) {
            this.currentIndex--;
            this.updateSlide();
        }
    }
    
    updateSlide() {
        this.slides.forEach((slide, index) => {
            slide.classList.toggle('active', index === this.currentIndex);
        });
        
        this.progressDots.forEach((dot, index) => {
            dot.classList.toggle('active', index === this.currentIndex);
        });
    }
    
    hideSwipeHint() {
        this.swipeHint.classList.add('hidden');
    }
    
    hideHintAfterDelay() {
        setTimeout(() => {
            this.hideSwipeHint();
        }, 5000);
    }
    
    setupMusicControl() {
        this.musicControl.addEventListener('click', () => {
            this.toggleMusic();
        });
    }
    
    toggleMusic() {
        if (this.isPlaying) {
            this.bgMusic.pause();
            this.musicControl.classList.remove('playing');
            this.musicControl.classList.add('muted');
        } else {
            this.bgMusic.play().catch(e => {
                console.log('音乐播放失败:', e);
            });
            this.musicControl.classList.add('playing');
            this.musicControl.classList.remove('muted');
        }
        this.isPlaying = !this.isPlaying;
    }
    
    setupMusicAutoplay() {
        // 设置音乐循环播放
        this.bgMusic.loop = true;
        this.bgMusic.volume = 0.7; // 设置音量为70%
        
        // 多种方式尝试自动播放
        const tryAutoplay = () => {
            this.bgMusic.play().then(() => {
                this.isPlaying = true;
                this.musicControl.classList.add('playing');
                console.log('音乐自动播放成功');
            }).catch(e => {
                console.log('自动播放被阻止，等待用户交互');
                // 添加用户交互监听器
                this.addUserInteractionListener();
            });
        };
        
        // 页面加载后立即尝试播放
        setTimeout(tryAutoplay, 500);
        
        // 页面获得焦点时尝试播放
        window.addEventListener('focus', tryAutoplay);
        
        // 用户点击页面任意位置时尝试播放
        document.addEventListener('click', tryAutoplay, { once: true });
    }
    
    addUserInteractionListener() {
        const startMusic = () => {
            if (!this.isPlaying) {
                this.bgMusic.play().then(() => {
                    this.isPlaying = true;
                    this.musicControl.classList.add('playing');
                    this.musicControl.classList.remove('muted');
                }).catch(e => {
                    console.log('音乐播放失败:', e);
                });
            }
        };
        
        // 监听各种用户交互事件
        document.addEventListener('touchstart', startMusic, { once: true });
        document.addEventListener('click', startMusic, { once: true });
        document.addEventListener('keydown', startMusic, { once: true });
    }
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
    new ImageSlideshow();
});

// 防止页面缩放
document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

document.addEventListener('gesturechange', function (e) {
    e.preventDefault();
});

document.addEventListener('gestureend', function (e) {
    e.preventDefault();
});